<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
	<view>
		<uni-list>
			<uni-list :border="true" v-for="item in concernList">
				<!-- 显示圆形头像 -->
				<view>
					<uni-list-chat :avatar-circle="true" :title="item.concernBeUser.userName"
						:avatar="'http://121.40.246.29/prod-api'+item.concernBeUser.avatar" link style="height: 40px;"
						@click="toHomePage(item.concernBeUserId)">
					</uni-list-chat>
					<button class="attention" @click="deleteUser(item.concernId)">
						<text>{{textStatus}}</text>
					</button>
				</view>

			</uni-list>
		</uni-list>
	</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				userId: 0,
				tokenList: [],
				concernList: [],
				textStatus: '已关注'

			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
					this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.tokenList = uni.getStorageSync("storage_data") || {};

			// # 通过点出他的名字拿取vuex_xxx 比如id就是vuex_id 
			this.userId = this.tokenList.vuex_id
			this.getMyConcernList()
		},
		methods: {
			toHomePage(userId) {
				uni.navigateTo({
					url: '/pages/mine/homePage/homePage?userId=' + userId
				})
			},
			getMyConcernList() {
				uni.request({
					url: this.$BASE_URL.baseUrl + '/mine/concern/list',
					method: 'GET',
					data: {
						concernUserId: this.userId
					},
					success: (res) => {
						this.concernList = res.data.rows
						console.log(res.data.rows)
					}
				})

			},
			deleteUser(concernId) {
				uni.request({
					url: this.$BASE_URL.baseUrl + '/mine/concern/' + concernId,
					method: 'DELETE',
					// header: {
					//   'Content-Type': 'application/json'
					// },
					success: (res) => {
						// 删除成功后再更新列表
						this.getMyConcernList();
					},
					fail: (err) => {
						console.error('Failed to delete comment:', err);
						// 在请求失败时，可以根据需要处理错误情况
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F0E7;
	}

	// 列表

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	//关注按钮
	.attention {
		position: relative;
		top: -25px;
		right: -120px;
		width: 70px;
		height: 30px;
		font-size: 10px;
		line-height: 30px;
		margin-top: 5px;
	}

	.attention:active {
		color: red;
	}
</style>